
var arr1 = ["易小星", "马月", "李明伟", "弹幕Bilibili", "赫畅", "周寿", "黄纪鑫", "唐海", "汪洋", "贾宝玉"];
var arr2 = ["<<万万没想到>> 知道不?", "他说他是时尚和娱乐圈里最懂互联网的人", '"黄牛党"终结者, 一个盘活了二手票市场的平台', "弹幕视频分享网站", "<<万万没想到>> 知道不?", "<<万万没想到>> 知道不?", "他说他是时尚和娱乐圈里最懂互联网的人", '"黄牛党"终结者, 一个盘活了二手票市场的平台', "弹幕视频分享网站", "<<万万没想到>> 知道不?"];
var arr3 = ["万合天宜创始人之一, 首席内容官", "星云网CEO", "西十区创始人兼CEO", "", "万合天宜创始人之一", "首席内容官", "星云网CEO", "西十区创始人兼CEO", "天宜创始人之一", "首席内容官"];
/*第四页的人物图片*/
var imgs = $(".content .person>li>img");
/***第五页的人物图片***/
var personImgs = $(".page-five li img:nth-child(1)"); 

/*初始化swiper对象*/

var swiperV = new Swiper('.swiper-container-v', {
	direction: 'vertical',
	//	mousewheelControl: true,

	onSlideChangeEnd: function(swiper) {
		//activeIndex 未加loop循环播放属性时 获取的下标
		//realIndex 添加loop时 获取的下标
		//		alert(swiper.activeIndex)
		switch(swiper.activeIndex) {
			case 1:
				$(".page-two>img:nth-child(2)").addClass("animated fadeInRight");
				$(".page-two>img:nth-child(3)").addClass("animated fadeInLeft");
				break;
			case 2:

				break;
			case 3:
				//第四个页面加载时 开始动画, 
				$("#bg").show();
				$(".content img:nth-of-type(1)").css("animation", "hiden 4s, zoomIn 2s 4s");
				$(".content img:nth-of-type(2)").css("animation", "hiden 2s, zoomIn 2s 2s");
				//tap 每一个头像执行的动作
				$(".person li").css("animation", "hiden 2s, personHang 2s 2s");
				imgs.each(function(i) {
					imgs.eq(i).on("tap", function() {
						$(".content .person>li>img").css("opacity", 0);
						$(".person li").css("animation", "tapSmall 2s forwards");

						$(".x").css("display", "block").css("animation", "hiden .5s,fadeIn .5s .5s");
						$(".swiper-container-h").css("display", "block");
						$(".swiper-container-h img").css("animation", "zoomIn 1s");
						$(".swiper-button-next").css("display", "block");
						$(".swiper-button-prev").css("display", "block");
						/******  i  每个图片对应的索引 *******************/
						/********第四页 找相应的头像对应的水平swiper 页码********/
						
					});
				});
				//tap 关闭按钮(图片)执行的动作
				$(".x").on("tap", function() {
					$(".x").css("animation", "fadeOut 1s both")
					$(".swiper-container-h img").css("animation", "zoomOut 3s forwards");
					$(".swiper-button-next").css("display", "none");
					$(".swiper-button-prev").css("display", "none");
					$(".content .person>li>img").css("opacity", 1);
					$(".content .person>li>img").css("animation", "taoBig .5s both");
					$(".person li").css("animation", "taoBig .5s both");
					//延迟计时器调整 .swiper-container-h 消失的先后顺序
					var timer = setTimeout(function() {
						$(".swiper-container-h").css("display", "none");
						clearTimeout(timer);
					}, 1000);
				});

				$(".content .person>li>img").css("animation", "hiden 2s, personHang 2s 2s");
				$(".content .title>p:nth-child(1)").css("animation", "bounceInLeft 1.5s");
				$(".content .title>p:nth-child(2)").css("animation", "hiden 1s, zoomIn .5s 1s");
				break;
			case 4:
				$(".tamen").css("animation", "fadeIn 2s both");
				/*遍历每个人物图片 添加动画 实现依次发生动画*/
				personImgs.each(function (i) {
				if (i == 1) {
					$(".tap").css("animation", "fadeIn 1s 2s infinite");
				}
					personImgs.eq(i).css("animation", "hangPage5 1s "+(2 + .5*i)+"s both");
					$(".page-five li img:nth-child(3)").eq(i).css("animation", "hangPage5Dwon 2s "+(1 + .5*i)+"s both");
				});
				hangTap(personImgs, arr1, arr2, arr3);
				/*点击人物简介关闭按钮关闭人物简介*/
				$(".personIntro img:nth-child(1)").on('tap', function () {
					$(".personIntro").css("animation", "hangPage5Hide 1s both");
				})
				break;
		}
	}
});

var swiperH = new Swiper('.swiper-container-h', {
	nextButton: '.swiper-button-next',
	prevButton: '.swiper-button-prev',
	loop: true
});
imgs.each(function (i) {
	imgs.eq(i).on("tap", function () {
		swiperH.slideTo(i+1, 10, false);
	})
})


//封装每个图片的点击事件
function hangTap(ele, arr1, arr2, arr3) {
	for (var i = 0; i < ele.length; i++) {
		ele[i].index = i;
		ele[i].onclick = (function () {
			$(".personIntro").show().css("animation", "hangPage5Show 1s");
			$(".personIntro img:nth-child(2)").attr("src", "img/pagefive/0"+ (this.index+1) +".jpg");
			$(".personIntro>h2").text(arr1[this.index]);
			$(".personIntro>p:nth-child(1)").text(arr2[this.index]);
			$(".personIntro>p:nth-child(2)").text(arr3[this.index]);
		})
	}
	
}
